<template>
  <section id="team" class="team-section">
    <div class="team-container">
      <!-- 标题区域 -->
      <div class="team-header">
        <h2 class="team-title">
          <span class="gradient-text">追梦者</span>
          <span class="subtitle">四个大学生的创业之路</span>
        </h2>
        <p class="team-subtitle">
          怀揣梦想，砥砺前行，用青春书写AI时代的传奇
        </p>
      </div>

      <!-- 团队故事 -->
      <div class="team-story">
        <div class="story-content">
          <div class="story-text">
            <h3 class="story-title">我们的故事</h3>
            <p class="story-paragraph">
              四个来自不同地区的大学生，因为同一个梦想走到了一起。我们白天上课，晚上兼职打工，
              周末和假期全部投入到这个项目中。一年来，我们经历了无数个不眠之夜，
              用泡面充饥，用咖啡提神，用青春和汗水浇灌着这个梦想。
            </p>
            <p class="story-paragraph">
              从最初的一个想法，到现在的完整产品，每一步都凝聚着我们的心血。
              我们相信，真正的创新不是来自大公司的资源，而是来自年轻人的激情和坚持。
              我们愿意用最真诚的心，最努力的态度，去创造属于这个时代的奇迹。
            </p>
          </div>
          <div class="story-visual">
            <div class="timeline">
              <div class="timeline-item" v-for="(item, index) in timeline" :key="index">
                <div class="timeline-dot" :class="`dot-${index + 1}`"></div>
                <div class="timeline-content">
                  <h4>{{ item.title }}</h4>
                  <p>{{ item.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 团队成员 -->
      <div class="team-members">
        <h3 class="members-title">核心团队</h3>
        <div class="members-grid">
          <div class="member-card" v-for="(member, index) in teamMembers" :key="index">
            <div class="member-avatar">
              <div class="avatar-placeholder">
                <i :class="member.icon"></i>
              </div>
              <div class="member-glow"></div>
            </div>
            <div class="member-info">
              <h4 class="member-name">{{ member.name }}</h4>
              <p class="member-role">{{ member.role }}</p>
              <p class="member-desc">{{ member.description }}</p>
              <div class="member-achievement">
                <i class="fas fa-star"></i>
                <span>{{ member.achievement }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 创业宣言 -->
      <div class="team-manifesto">
        <div class="manifesto-content">
          <h3 class="manifesto-title">我们的宣言</h3>
          <div class="manifesto-text">
            <p class="manifesto-quote">
              "我们不是富二代，没有雄厚的资金支持；我们不是天才，没有过人的天赋。
              但我们有一颗永不放弃的心，有一双勤劳的双手，有一个改变世界的梦想。
              我们相信，在这个AI时代，每一个有梦想的年轻人都能创造奇迹。"
            </p>
            <div class="manifesto-signature">
              <span class="signature-text">—— 智索真源团队</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 投资邀请 -->
      <div class="investment-invite">
        <div class="invite-content">
          <h3 class="invite-title">寻找志同道合的伙伴</h3>
          <p class="invite-text">
            我们正在寻找有远见的投资人，愿意与我们共同见证这个梦想的实现。
            我们需要的不仅仅是资金，更是信任、指导和共同成长的伙伴。
          </p>
          <div class="invite-stats">
            <div class="stat-item">
              <div class="stat-number">365</div>
              <div class="stat-label">个日夜</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">1</div>
              <div class="stat-label">个梦想</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">1</div>
              <div class="stat-label">篇专利</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">1</div>
              <div class="stat-label">篇软著</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">∞</div>
              <div class="stat-label">种可能</div>
            </div>
          </div>
          <button class="invite-btn" @click="scrollToContact">
            <i class="fas fa-handshake"></i>
            联系我们
          </button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'TeamSection',
  data() {
    return {
      timeline: [
        {
          title: '梦想萌芽',
          description: '四个大学生因为同一个AI梦想相遇'
        },
        {
          title: '艰难起步',
          description: '白天上课，晚上兼职，周末开发'
        },
        {
          title: '技术突破',
          description: '攻克核心技术难题，产品初具雏形'
        },
        {
          title: '团队成长',
          description: '在困难中磨砺，在挫折中成长'
        },
        {
          title: '产品发布',
          description: '智索真源正式上线，梦想照进现实'
        }
      ],
      teamMembers: [
        {
          name: '夏祁轩',
          role: '技术负责人 & CEO',
          description: '计算机科学与技术专业，AI算法专家，拥有3年全栈开发经验，主导平台技术架构设计',
          icon: 'fas fa-code',
          achievement: '主导开发AI智能匹配算法'
        },
        {
          name: '徐安',
          role: '产品经理 & CTO',
          description: '计算机科学与技术专业，产品设计专家，负责用户体验设计，产品规划，全栈开发',
          icon: 'fas fa-lightbulb',
          achievement: '设计区块链存证系统'
        },
        {
          name: '童晓白',
          role: '运营总监 & COO',
          description: '计算机科学与技术专业，运营专家，负责用户运营，全栈开发，平台生态建设',
          icon: 'fas fa-chart-line',
          achievement: '建立用户成长体系'
        },
        {
          name: '夏新宇',
          role: '商务合作 & CMO',
          description: '商务拓展专家，负责合作洽谈，市场推广，数据分析，产品优化',
          icon: 'fas fa-handshake',
          achievement: '获得政府战略合作'
        }
      ]
    }
  },
  methods: {
    scrollToContact() {
      const element = document.getElementById('contact')
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' })
      }
    }
  }
}
</script>

<style scoped>
.team-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  position: relative;
  overflow: hidden;
}

.team-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.team-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

/* 标题区域 */
.team-header {
  text-align: center;
  margin-bottom: 80px;
}

.team-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.gradient-text {
  background: linear-gradient(135deg, #00d4ff 0%, #5b73e8 50%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease-in-out infinite;
}

.subtitle {
  color: #e5e7eb;
  font-size: 1.5rem;
  font-weight: 300;
  margin-left: 1rem;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.team-subtitle {
  font-size: 1.2rem;
  color: #9ca3af;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 团队故事 */
.team-story {
  margin-bottom: 100px;
}

.story-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.story-text {
  color: white;
}

.story-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: #00d4ff;
}

.story-paragraph {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: #d1d5db;
}

/* 时间线 */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #00d4ff, #5b73e8, #06b6d4);
}

.timeline-item {
  position: relative;
  margin-bottom: 3rem;
  padding-left: 2rem;
}

.timeline-dot {
  position: absolute;
  left: -1.5rem;
  top: 0.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #00d4ff;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
  animation: pulse 2s infinite;
}

.dot-1 { background: #00d4ff; }
.dot-2 { background: #5b73e8; }
.dot-3 { background: #06b6d4; }
.dot-4 { background: #10b981; }
.dot-5 { background: #f59e0b; }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

.timeline-content h4 {
  color: #00d4ff;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.timeline-content p {
  color: #9ca3af;
  font-size: 1rem;
  line-height: 1.6;
}

/* 团队成员 */
.team-members {
  margin-bottom: 100px;
}

.members-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: #00d4ff;
  margin-bottom: 3rem;
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.member-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.member-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(91, 115, 232, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.member-card:hover::before {
  opacity: 1;
}

.member-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
}

.member-avatar {
  position: relative;
  margin-bottom: 1.5rem;
}

.avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #5b73e8);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 2rem;
  color: white;
  position: relative;
  z-index: 2;
}

.member-glow {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.3), transparent);
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { opacity: 0.5; transform: scale(1); }
  to { opacity: 1; transform: scale(1.1); }
}

.member-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 2;
}

.member-role {
  color: #00d4ff;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.member-desc {
  color: #9ca3af;
  font-size: 0.9rem;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.member-achievement {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 15px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  position: relative;
  z-index: 2;
}

.member-achievement i {
  color: #fbbf24;
  font-size: 0.9rem;
}

.member-achievement span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* 创业宣言 */
.team-manifesto {
  margin-bottom: 100px;
  text-align: center;
}

.manifesto-content {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.manifesto-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(91, 115, 232, 0.1));
  opacity: 0.3;
}

.manifesto-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #00d4ff;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.manifesto-quote {
  font-size: 1.3rem;
  line-height: 1.8;
  color: #e5e7eb;
  font-style: italic;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.manifesto-signature {
  text-align: right;
  position: relative;
  z-index: 2;
}

.signature-text {
  color: #00d4ff;
  font-size: 1.1rem;
  font-weight: 600;
}

/* 投资邀请 */
.investment-invite {
  text-align: center;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(91, 115, 232, 0.1));
  border-radius: 20px;
  padding: 4rem 2rem;
  border: 1px solid rgba(0, 212, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.investment-invite::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(0, 212, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(91, 115, 232, 0.2) 0%, transparent 50%);
}

.invite-content {
  position: relative;
  z-index: 2;
}

.invite-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #00d4ff;
  margin-bottom: 1.5rem;
}

.invite-text {
  font-size: 1.2rem;
  color: #d1d5db;
  line-height: 1.8;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.invite-stats {
  display: flex;
  justify-content: center;
  gap: 3.8rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: #00d4ff;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.stat-label {
  font-size: 1.1rem;
  color: #9ca3af;
  font-weight: 500;
}

.invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #00d4ff 0%, #5b73e8 100%);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
}

.invite-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(0, 212, 255, 0.4);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .members-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 1024px) {
  .story-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .team-title {
    font-size: 3rem;
  }
  
  .invite-stats {
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .team-section {
    padding: 60px 0;
  }
  
  .team-title {
    font-size: 2.5rem;
  }
  
  .subtitle {
    font-size: 1.2rem;
    margin-left: 0;
    margin-top: 0.5rem;
    display: block;
  }
  
  .members-grid {
    grid-template-columns: 1fr;
  }
  
  .invite-stats {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .manifesto-content {
    padding: 2rem;
  }
  
  .manifesto-quote {
    font-size: 1.1rem;
  }
}
</style>
